<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import {
  Location,
  Menu,
  Setting,
  User,
  Lock,
  Document,
  Link,
  Monitor,
  Grid,
  Files,
  Avatar,
  Trophy,
  Sunny,
  ArrowDown
} from '@element-plus/icons-vue'
import ThemeSwitcher from './components/ThemeSwitcher.vue'
import { useThemeStore } from './stores/theme'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

// 初始化主题
const themeStore = useThemeStore()
themeStore.initializeTheme()

// 路由对象
const router = useRouter()

// 是否折叠侧边栏
const isCollapse = ref(false)

// 屏幕宽度
const screenWidth = ref(window.innerWidth)

// 监听窗口大小变化
const handleResize = () => {
  screenWidth.value = window.innerWidth
  // 在小屏幕下自动折叠侧边栏
  if (screenWidth.value < 768) {
    isCollapse.value = true
  }
}

// 组件挂载时添加监听
onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 初始检查屏幕宽度
  handleResize()
})

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 监听屏幕宽度变化，自动调整侧边栏状态
watch(screenWidth, (newWidth) => {
  if (newWidth < 768) {
    isCollapse.value = true
  }
})

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清除登录信息
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('username')
    localStorage.removeItem('password')
    localStorage.removeItem('rememberMe')
    
    ElMessage.success('退出登录成功')
    router.push('/login')
  }).catch(() => {})
}

// 菜单项
// 菜单项
const menuItems = [
  {
    index: '0',
    icon: Monitor,
    title: '仪表盘',
    route: '/dashboard'
  },
  {
    index: '1',
    icon: User,
    title: '管理员管理',
    route: '',
    children: [
      {
        index: '1-1',
        icon: User,
        title: '管理员列表',
        route: '/admin'
      },
      {
        index: '1-2',
        icon: Lock,
        title: '角色管理',
        route: '/role'
      },
      {
        index: '1-3',
        icon: Setting,
        title: '权限管理',
        route: '/permission'
      }
    ]
  },
  {
    index: '2',
    icon: User,
    title: '系统管理',
    route: '',
    children: [
      {
        index: '2-1',
        icon: Grid,
        title: '菜单管理',
        route: '/menu'
      },
      {
        index: '2-2',
        icon: Monitor,
        title: '系统设置',
        route: '/settings'
      },
      {
        index: '2-3',
        icon: Document,
        title: '操作日志',
        route: '/log'
      }
    ]
  },
  {
    index: '3',
    icon: Document,
    title: '内容管理',
    route: '',
    children: [
      {
        index: '3-1',
        icon: Document,
        title: '文章管理',
        route: '/article'
      },
      {
        index: '3-2',
        icon: Files,
        title: '分类管理',
        route: '/category'
      },
      {
        index: '3-3',
        icon: Link,
        title: '友情链接',
        route: '/links'
      }
    ]
  },
  {
    index: '4',
    icon: Avatar,
    title: '会员管理',
    route: '',
    children: [
      {
        index: '4-1',
        icon: Avatar,
        title: '会员列表',
        route: '/member'
      },
      {
        index: '4-2',
        icon: Trophy,
        title: '会员等级',
        route: '/member-level'
      }
    ]
  }
]
</script>

<template>
  <el-container class="layout-container" v-if="$route.path !== '/login'">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar" :class="{ collapsed: isCollapse }">
      <div class="logo-container">
        <img src="@/assets/logo.svg" alt="Logo" class="logo" />
        <span v-show="!isCollapse" class="title">后台管理系统</span>
      </div>
      
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        :collapse="isCollapse"
        router
      >
        <template v-for="item in menuItems" :key="item.index">
          <el-sub-menu v-if="item.children && item.children.length" :index="item.index">
            <template #title>
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.index" :index="child.route">
              <el-icon><component :is="child.icon" /></el-icon>
              <template #title>{{ child.title }}</template>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.route">
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="main-container">
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <div class="header-left">
          <el-icon @click="isCollapse = !isCollapse" class="collapse-btn">
            <Menu />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.meta.title || '当前页面' }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <ThemeSwitcher />
          <el-dropdown>
            <span class="user-info">
              <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <span>管理员</span>
              <el-icon><Location /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 内容区域 -->
      <el-main class="main-content">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
  
  <!-- 登录页面直接显示路由内容，不包含布局 -->
  <RouterView v-else />
</template>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.sidebar {
  background-color: var(--el-bg-color-sidebar, #304156);
  transition: width 0.3s;
  overflow: hidden;
  flex-shrink: 0;
  height: 100vh;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: #fff;
  background-color: var(--el-bg-color-logo, #2b2f3a);
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.el-menu-vertical {
  border-right: none;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.header {
  background-color: var(--el-bg-color, #ffffff);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 60px;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info span {
  margin: 0 5px;
}

.main-content {
  background-color: var(--el-bg-color-page, #f0f2f5);
  padding: 15px;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .sidebar {
    position: absolute;
    z-index: 1000;
    height: 100vh;
  }
  
  .sidebar:not(.collapsed) {
    width: 200px !important;
  }
  
  .sidebar.collapsed {
    width: 0 !important;
  }
  
  .main-container {
    margin-left: 0;
    width: 100%;
  }
}
</style>
